<template>
	<view>
		<a href="https://www.baidu.com">123</a>
		<view class="first">
			<image class="first-tu" src="/static/ey.png" mode="aspectFill"></image>
		</view>

		<view class="second">
			<view class="second-sp">
				<view class="second-sp_sp">
					<view class="xiba">
						<text class="second-nnn">￥ 999999</text>
						<view class="yjj">
							<image class="yj" src="../../static/ck.png"></image>
							<text class="yjj-zi">123456</text>
						</view>
					</view>
					<view class="zcx">
						<view><text class="djzh">顶级账号</text></view>
						<!-- <view class="third-sp_sp_zi"> -->
						<text class="second-sp-">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
						<!-- </view> -->
					</view>
					<image class="rz" src="../../static/xiba.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="third">
			<view class="third-xxk">
				<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">商品信息</view>
				<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">交易流程</view>
				<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">官方交流群</view>
			</view>
			<view class="third-xx">
				<view class="third-gg" v-show="Inv == 0">
					<text class="third-xx-nm">商品编号 ： E12345</text>
					<text class="third-xx-nm">发布时间 ： 2022.1.1</text>
					<text class="third-xx-nm">商品类型 ： 账号</text>
					<text class="third-xx-nm">游戏区服 ： 英雄联盟-电信大区-艾欧尼亚</text>
					<text class="third-xx-nm">实名情况 ： 可二次实名</text>
					<text class="third-xx-nm">皮肤数 ： 1.0</text>
					<text class="third-xx-nm">炫彩数 ： 1.0</text>
					<text class="third-xx-nm">是否接受砍价 ： 是</text>
					<text class="third-xx-mn">商品描述</text>
					<text class="third-xx-nm">12345账号测试测试测试测试测试测试测试测试测试测试</text>
					<image class="tt" src="../../static/8888.png" mode="aspectFit"></image>
				</view>
				<view class="third-jj" v-show="Inv == 1">
					<view class="third-jj-">
						<view class="third-jj_jj">
							<image class="third-jj_tu" src="/static/1_round_solid_数字1_by_climei.png"></image>
							<view class="third-jj_zi">
								<text class="third-jj_zi-da">下单并支付</text>
								<text class="third-jj_zi-xiao">选择游戏账号(id)确认信息并下单支付</text>
							</view>
						</view>
						<view class="third-jj_jj">
							<image class="third-jj_tu" src="/static/2_round_solid_数字2_by_climei.png"></image>
							<view class="third-jj_zi">
								<text class="third-jj_zi-da">上号验证角色</text>
								<text class="third-jj_zi-xiao">登录选取账号查看确认角色是否与其展示相符</text>
							</view>
						</view>
						<view class="third-jj_jj">
							<image class="third-jj_tu" src="/static/3_round_solid_数字3_by_climei.png"></image>
							<view class="third-jj_zi">
								<text class="third-jj_zi-da">修改资料</text>
								<text class="third-jj_zi-xiao">根据客服提示进行账号的资料修改</text>
							</view>
						</view>
						<view class="third-jj_jj">
							<image class="third-jj_tu" src="/static/4_round_solid_数字4_by_climei.png"></image>
							<view class="third-jj_zi">
								<text class="third-jj_zi-da">资料审核结束</text>
								<text class="third-jj_zi-xiao">平台对修改的资料进行评估审核</text>
							</view>
						</view>
						<view class="third-jj_jj">
							<image class="third-jj_tu" src="/static/5_round_solid_数字5_by_climei.png"></image>
							<view class="third-jj_zi">
								<text class="third-jj_zi-da">资料记录备案</text>
								<text class="third-jj_zi-xiao">对修改的资料进行备案处理，提高安全性</text>
							</view>
						</view>
						<view class="third-jj_jj">
							<image class="third-jj_tu" src="/static/6_round_solid_数字6_by_climei.png"></image>
							<view class="third-jj_zi">
								<text class="third-jj_zi-da">给号主放款</text>
								<text class="third-jj_zi-xiao">以上流程全部审核通过，款项放至号主</text>
							</view>
						</view>
					</view>
					<view class="jyxz">交易须知</view>
					<view class="jyxz-gg">
						<view class="jyxz-gg_gg">
							<view class="jyxz-x-x">
								<view class="jyxz-x">交易须知</view>
							</view>
							<view class="jyxz-y-y">
								<view class="jyxz-y">买家须知</view>
							</view>
						</view>
						<view class="jyxz-gg_gg">
							<view class="jyxz-x-x">
								<view class="jyxz-x">卖家须知</view>
							</view>
							<view class="jyxz-y-y">
								<view class="jyxz-y">包赔介绍</view>
							</view>
						</view>
					</view>
				</view>
				<view class="jlq" v-show="Inv == 2">
					<view class="qlj">
						<view class="jlq-">
							<view class="jlq-jlq">
								<text class="jlq-jr">lol号库五群（满）：123456</text>
							</view>
							<view class="jlq-djj">
								<image class="fz" src="../../static/复制.png"></image>
								<button class="bt">点击加群</button>
							</view>
						</view>
						<view class="jlq-">
							<view class="jlq-jlq">
								<text class="jlq-jr">lol号库五群（满）：123456</text>
							</view>
							<view class="jlq-djj">
								<image class="fz" src="../../static/复制.png"></image>
								<button class="bt">点击加群</button>
							</view>
						</view>
						<view class="jlq-">
							<view class="jlq-jlq">
								<text class="jlq-jr">lol号库五群（满）：123456</text>
							</view>
							<view class="jlq-djj">
								<image class="fz" src="../../static/复制.png"></image>
								<button class="bt">点击加群</button>
							</view>
						</view>
						<view class="jlq-">
							<view class="jlq-jlq">
								<text class="jlq-jr">lol号库五群（满）：123456</text>
							</view>
							<view class="jlq-djj">
								<image class="fz" src="../../static/复制.png"></image>
								<button class="bt">点击加群</button>
							</view>
						</view>
						<view class="jlq-">
							<view class="jlq-jlq">
								<text class="jlq-jr">lol号库五群（满）：123456</text>
							</view>
							<view class="jlq-djj">
								<image class="fz" src="../../static/复制.png"></image>
								<button class="bt">点击加群</button>
							</view>
						</view>
						<view class="jlq-">
							<view class="jlq-jlq">
								<text class="jlq-jr">lol号库五群（满）：123456</text>
							</view>
							<view class="jlq-djj">
								<image class="fz" src="../../static/复制.png"></image>
								<button class="bt">点击加群</button>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fourth">
			<view class="fourth-z">
				<view class="fourth-z_z">
					<image class="fourth-z_z-tu" src="/static/收藏.png"></image>
					<text class="fourth-z_z-zi">收藏</text>
				</view>
				<view class="fourth-z_z">
					<image class="fourth-z_z-tu" src="/static/客服.png"></image>
					<text class="fourth-z_z-zi">客服</text>
				</view>
			</view>
			<view class="fourth-c">
				<button class="fourth-c_c">砍价购买</button>
				<button class="fourth-c_x">立即购买</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Inv: 0

			}
		},
		methods: {
			changeTab(Inv) {
				that.navIdx = Inv;
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #dcdcdc;
	}


	.qlj {
		margin-top: 40rpx;
		margin-left: 30rpx;

	}

	.bt {
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		font-size: 20rpx;
		width: 120rpx;
		height: 50rpx;
		background-color: #e4f9ff;
		margin-left: 10rpx;
	}

	.fz {
		width: 50rpx;
		height: 50rpx;
	}

	.jlq-jr {
		font-size: 28rpx;
	}

	.jlq {
		height: 800rpx;
	}

	.jlq-djj {
		display: flex;
		margin-left: 30rpx;
		padding-right: 20rpx;

	}

	.jlq- {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
	}

	.jyxz-y-y {
		padding-right: 90rpx;
	}

	.jyxz-x-x {
		display: flex;
		padding-left: 90rpx;
	}

	.jyxz-y {
		width: 250rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e4f9ff;
	}

	.jyxz-x {
		width: 250rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e4f9ff;


	}

	.jyxz-gg_gg {
		display: flex;
		justify-content: space-around;
		margin-top: 15rpx;




	}

	.jyxz-gg {
		background-color: white;
		height: 500rpx;
		padding-top: 40rpx;

	}

	.jyxz {
		margin-top: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.third-jj {
		background-color: #dcdcdc;

	}



	.third-jj- {
		margin-top: 20rpx;
		padding-left: 20rpx;
		height: 900rpx;
		background-color: white;


	}

	.third-jj_zi-xiao {
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.third-jj_zi-da {
		font-size: 35rpx;
		font-weight: 600;
	}

	.third-jj_zi {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		/* 	margin-top: 20rpx; */
	}

	.third-jj_tu {
		width: 50rpx;
		height: 50rpx;

	}

	.third-jj_jj {
		display: flex;
		align-items: center;
		margin-top: 40rpx;

	}

	.fourth-z_z-zi {
		font-size: 20rpx;
	}

	.fourth-c_x {
		background-color: #820000;
		color: white;
		border-radius: 50rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-left: 10rpx;
		width: 160rpx;
		justify-content: center;
		font-size: 20rpx;
		white-space: nowrap;
	}

	.fourth-c_c {
		background-color: #00aaff;
		width: 160rpx;
		color: white;
		border-radius: 50rpx;
		font-size: 20rpx;
		white-space: nowrap;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fourth-c {
		display: flex;
		align-items: center;
	}

	.fourth-z {
		display: flex;

	}

	.fourth-z_z {
		display: flex;

		flex-direction: column;

		margin-left: 20rpx;

	}

	.fourth-z_z-tu {
		width: 50rpx;
		height: 50rpx;

	}

	.fourth {
		background-color: white;
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tt {

		width: 100%;
		height: 1700rpx;
	}

	.third-xx-mn {
		font-size: 50rpx;
		padding-left: 20rpx;
		margin-top: 20rpx;
	}

	.third-gg {
		display: flex;
		flex-direction: column;
	}

	.third-xx-nm {
		margin-top: 20rpx;
		padding-left: 40rpx;
		font-size: 20rpx;
	}


	.third-xx {
		margin-top: 15rpx;
		background-color: white;
		width: 96%;
	}

	.third-xxk {
		background-color: white;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 80rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.third {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.rz {
		margin-top: 40rpx;
		width: 300rpx;
		height: 40rpx;
		padding-left: 15rpx;

	}

	.djzh {
		background-color: red;
		color: white;
		border-radius: 10rpx;
		white-space: nowrap;
		font-size: 35rpx;

	}

	.zcx {
		/* float: left; */
		margin-top: 20rpx;
		padding-left: 15rpx;
		display: flex;

	}

	.yjj-zi {
		color: #aaaaaa;
		font-size: 30rpx;
	}

	.yjj {
		display: flex;
		/* justify-content: center; */
		align-items: center;
		padding-right: 15rpx;
	}

	.yj {
		height: 60rpx;
		width: 60rpx;
	}

	.second-sp- {
		font-size: 30rpx;
	}

	.second-nnn {
		color: red;
		font-size: 40rpx;
		flex-wrap: nowrap;
	}

	.xiba {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.second-sp {
		background-color: white;
		width: 96%;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.second {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.first-tu {
		width: 100%;
		height: 100%;

	}

	.first {
		width: 100%;
		height: 375rpx;

	}
</style>
